import Component from "./Component";
import List from "./List";

export interface IInputOptions{
    wrapperEl:HTMLElement;
    placeholderText:string;
    buttonText:string;
}
class Input extends Component {
    private options:IInputOptions;
    constructor(options:IInputOptions){
        super();
        this.options = options;
    }

    public render() {
        const {placeholderText,buttonText} = this.options;
        // 将input与button添加到wrapper中
        this.options.wrapperEl.innerHTML += Component.inputView(placeholderText, buttonText);
    }

    public bindEvent(){
        const oAddBtn = document.querySelector('.add-btn');
        const oInput = document.querySelector('.todo-input');
        oAddBtn.addEventListener('click',this.handleBrnClick.bind(this,oInput),false);
    }

    private handleBrnClick(inputDom){
        const val:string = inputDom.value.trim();
        if(val.length){
            // 点击添加增加一项数据并清空输入框
            List.addItem(val); // addItem直接挂载到List上的一个静态方法 可以直接使用 不需要实例化List
            inputDom.value = '';
        }
    }
}
export default Input;